<template>
    <div class="box">
        <div class="selectBox1">
            <div class>
                <span style="width:1rem"></span>

            </div>
            <div>
                <el-form ref="paramform" size="mini" :model="form" inline>
                    <el-form-item prop="month">
                        <el-date-picker clearable style="width:150px" value-format="yyyy-MM-dd" v-model="form.workDate"
                                        type="date" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item >
                        <el-select v-model="form.workTime" placeholder="选择班次" clearable>
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item  prop="deptId" :label-width="formLabelWidth">
                        <el-cascader clearable placeholder="部门" :options="companyTree" :props="optionProps" change-on-select ref="cascaderEdit" @change="casChange1(deptId,false)" v-model="deptId" filterable style="width:200px"></el-cascader>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchData()" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>


        <el-table
                :data="oilPriceableData"
                stripe
                ref="table"
                show-summary
                v-loading="loading"
                element-loading-text="网络开小差,正在努力加载..."
                element-loading-spinner="el-icon-loading"
                :height="tableHeight"
                :summary-method="getSummaries"
                style="width: 100%">
            <el-table-column
                    prop="UNIT_NAME"
                    label="部门"
                    width="180">
            </el-table-column>
            <el-table-column v-for="item in typeList"
            :key="item.prop"
                             :prop="item.prop"
                             :label="item.label"
            >
            </el-table-column>
            <el-table-column
                    prop="shift"
                    label="工人出勤"
                    width="180">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button icon="el-icon-view" @click="handleClick(scope.row)" type="text" size="small">详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>



        <div class="box">
            <el-drawer
                    :size="size"
                    title="人机状态详情"
                    :visible.sync="machineStatusDetails"
                    :direction="direction"
                    style="width: 100%;"
            >
                <div style="margin: 20px">
                    <el-table
                            :data="listSb"
                            stripe
                            height="400"

                            style="width: 100%">
                        <el-table-column
                                prop="equipment_type_name"
                                label="机械类型"
                                >
                        </el-table-column>

                        <el-table-column
                                prop="equipment_no"
                                label="机械编号"
                                >
                        </el-table-column>

                        <el-table-column
                                label="状态"
                               >
                            <template slot-scope="scope">
                                <span v-if="scope.row.status == 0">正常</span>
                                <span v-else-if="scope.row.status == 1">故障</span>
                                <span v-else-if="scope.row.status == 2">维修</span>
                                <span v-else-if="scope.row.status == 3">保养</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="createName"
                                label="操作人"
                               >
                        </el-table-column>

                        <el-table-column
                                prop="createTime"
                                label="操作时间"
                              >
                        </el-table-column>

                    </el-table>
                </div>

            </el-drawer>


        </div>
    </div>
</template>

<script>
    import Utils from '@/libs/Utils.js'
    import BaseTable from '@/components/BaseTable'
    import BaseForm from '@/pages/SystemPage/system/component/form.vue'
    import dfilters from '@/libs/Utils.js'

    export default {
      name: 'deviceTypeInformation',
      components: {
        BaseForm,
        BaseTable
      },
      data() {
        return {
          size: '800px',
          typeList: [],
          oilPriceableData: [],
          loading: false,
          menuArr: [],
          listSb: [],
          machineStatusDetails: false,
          direction: 'rtl',

          form: {
            workDate: '',
            workTime: '',
            unit_id: '',
            company: '',
            shift: ''
          },
          options: [
            {
              value: '01',
              label: '白班'
            }, {
              value: '02',
              label: '夜班'
            }
          ],

          deptId: '',
          formLabelWidth: '120px', // form的item宽度
          nowData: {}, // 临时存放操作数据
          companyTree: [],
          optionProps: {
            value: 'id',
            label: 'name',
            children: 'children'
          }
        }
      },
      created() {
        this.getEqType()
        this.getcompTree()
      },
      computed: {
        tableHeight() {
          return this.$store.state.tableHeight
        },
        itableHeight() {
          return this.$store.state.tableHeight + 50
        }
      },
      updated() {
        this.$nextTick(() => {
          this.$refs['table'].doLayout();
        })
      },
      methods: {
        getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          // console.log(param)
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '合计';
              return;
            }
            for (let i = 0; i < this.typeList.length; i++) {
              if (column.label == this.typeList[i].label) {
                const values = data.map(item => (item[column.property]));
                let zcSum = 0
                let qbSum = 0
                for (let i = 0; i < values.length; i++) {
                  const arr = values[i].split('/');
                  zcSum += parseInt(arr[0])
                  qbSum += parseInt(arr[1])
                }
                sums[index] = zcSum + '/' + qbSum
              }
            }
            if (column.label == '工人出勤') {
              const values = data.map(item => (item[column.property]));
              let count = 0;
              for (let i = 0; i < values.length; i++) {
                if (values[i]) {
                  count += parseInt(values[i])
                }
              }
              sums[index] = count
            }
          });
          return sums;
        },

        // 获取公司🌲
        async getcompTree() {
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/publics/listcomdept`
          )
          if (res.data.code != '0000') {
            return this.$message.error(res.data.msg)
          }
          this.companyTree = this.getTreeData(res.data.data.treeNodeList)
        },

        // 递归判断列表，把最后的children设为undefined
        getTreeData(data) {
          for (var i = 0; i < data.length; i++) {
            if (data[i].children.length < 1) {
              // children若为空数组，则将children设为undefined
              data[i].children = undefined
            } else {
              // children若不为空数组，则继续 递归调用 本方法
              this.getTreeData(data[i].children)
            }
          }
          return data
        },

        casChange1(data, add) {
          this.$nextTick(() => {
            const node = this.$refs['cascaderEdit'].getCheckedNodes()

            if (this.deptId == '') {
              this.form.company = ''
              this.form.unit_id = ''
            }
            const name = node[0].data.deptOrCompany

            if (name == '部门') {
              this.form.company = node[0].data.companyId
              this.form.unit_id = data[data.length - 1]
            } else {
              this.deptId = ''
              return this.$message.warning('只能选择部门')
            }
          })
        },
        // 日期格式
        dateChange(val) {
          // 时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
          var date = new Date(val);
          var year = date.getFullYear();
          /* 在日期格式中，月份是从0开始的，因此要加0
                           * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
                           * */
          var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
          // 拼接
          return year + '-' + month;
        },

        handleClick(row) {
          this.machineStatusDetails = true
          this.nowData = row
          this.querybyid(row.UNIT_ID)
        },

        // 查询人机状态信息
        async getData() {
          if (!this.form.workDate) {
            this.form.workDate = ''
          }

          this.loading = true
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/machineStatus/queryall?unitId=${this.form.unit_id}&workDate=${this.form.workDate}&workTime=${this.form.workTime}`
          )

          if (res.status == 200) {
            this.loading = false
            if (res.data.success) {
              this.oilPriceableData = res.data.data
            }
          } else {
            this.$message.error('获取数据失败！')
          }
        },

        // 根据id查询人机状态信息
        async querybyid(id) {
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/machineStatus/querybyid?unitId=${id}`
          )
          this.listSb = res.data.data
        },

        /**
             * 动态表格
             * @returns {Promise<void>}
             */
        async getEqType() {
          this.typeList = []
          const res = await this.$http.get(
            `/${this.$ServiceName}/api/external/machineStatus/queryallType`
          )

          if (res.status == 200) {
            if (res.data.success) {
              const list = res.data.data
              for (let i = 0; i < list.length; i++) {
                const param = {
                  label: list[i].equipment_type_name,
                  prop: "'" + list[i].equipment_type_name + "'"
                }
                this.typeList.push(param)
              }
            }
          } else {
            this.$message.error('获取数据失败！')
          }
        },

        searchData() {
          this.getData()
        }
      }
    }
</script>

<style lang="less" scoped>
    /* 这个是为了解决前面样式覆盖之后伪类带出来的竖线 */
    .el-table::after{
        position: relative;
    }
    /deep/ .el-table {
        max-height: none !important;
    }

    .selectBox {
        justify-content: space-between;
        display: flex;

        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-left: none;

        height: 50px;
        padding-top: 11px;
        padding-left: 14px;
        padding-right: 20px;
    }

    /deep/ .el-drawer__header {
        margin-bottom: 0;
        padding: 16px;
        border-bottom: 1px solid gainsboro;
    }

    /deep/ .el-button--primary {
        background-color: #338ce8;
        border-color: #338ce8;
    }

    .page {
        background: #ffffff;
        border-radius: 4px 4px 0 0;
        padding: 0 1rem;
    }

    .box {
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-radius: 4px 4px 0 0;
        border-top: none;
    }
    .titleclass2{
        background-color: rgb(247, 246, 246);
        height: 50px;
        width: 103%;
        margin-left: -10px;
        line-height:50px;
    }
    .title {
        background: #f5f7fa;
        height: 40px;
        line-height: 40px;

        p {
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #303133;
            letter-spacing: 0;
            line-height: 16px;
            padding-left: 14px;
            line-height: 40px;
        }
    }

    /deep/ .el-table .cell {
        white-space: nowrap;
    }

    /deep/ .el-form-item--mini .el-form-item__label {
        line-height: 0;
    }

    /deep/ .el-pagination {
        text-align: right;
        padding: 10px 5px;
    }

    /deep/ .el-table th > .cell {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #606266;
    }

    /deep/ .el-table .el-button:focus,
    .el-table .el-button:hover {
        background-color: #fff;
        border: 1px solid #e1e4eb;
    }

    /deep/ .el-table .el-button--mini {
        color: #1684f6;
        border-color: transparent;
        background: transparent;
    }

    /deep/ .el-table th {
        border-left: 1px solid #ebeef5;
    }

    /deep/ .el-table th:nth-child(1) {
        border-left: none;
    }

    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #f5f7fa;
    }

    .right /deep/ .el-button--mini {
        padding: 7px 6px;
    }

    /deep/ .el-pagination.is-background .btn-next,
    /deep/ .el-pagination.is-background .btn-prev,
    /deep/ .el-pagination.is-background .el-pager li {
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-radius: 3px;
        border-radius: 3px;
    }

    /deep/ .el-button + .el-button {
        margin-left: 3px;
    }

    .asa {
        display: inline;

        /deep/ .el-button--mini,
        .el-button--mini.is-round {
            padding: 7px 6px;
        }
    }

    .selectBox1 {
        justify-content: space-between;
        display: flex;
        flex-direction: row-reverse;
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-left: none;
        line-height: 28px;
        height: 37px;
        padding-top: 11px;
        padding-left: 14px;
        padding-right: 20px;
    }

    .excelBox /deep/ .el-drawer__open .el-drawer.rtl {
        width: 50% !important;
    }

    /deep/ .el-form-item--mini.el-form-item {
        line-height: 28px;
    }

    /deep/ .demo-drawer__footer {
        text-align: right;
        padding-right: 1rem;
        border-top: 1px solid #c8cfde;
        background-color: #f5f7fa;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 50px;
    }
</style>
  